<template>
    <view class='bargain-list' >
		<view class='iconfont icon-xiangzuo' @tap='goBack' :style="'top:'+navH/2+'rpx'"></view>
		<view class="content-cert "   >
			<view class="steps" >
				<tui-steps  :items="items" spacing="300rpx" :activeSteps="activeSteps" ></tui-steps>
			</view>
			
			<view class="step1" v-show="activeSteps == 0">
				<view  class="order-list">
					
					
					<view class="product-box" v-for="v in list.sub">
						<view class="img">
							<image :src="v.cover_image" mode="aspectFit" style="width: 200rpx;height: 200rpx;"> </image>
						</view>
						<view class="product-temp">
							<view class="title">{{v.related_name}}</view>
							<view class="text">规格：{{v.norms_value_name}}</view>
							<view class="text">数量：{{v.related_num}}</view>
						</view>
					</view>
				</view>
				<!-- 申请原因 -->
				<view class="reason">
					<view class="reason-sq">
						<view>申请原因</view>
						<view  @tap="checkRemark">请选择申请原因</view>
					</view>
					<view class="reason-text">
						<input type="text"  placeholder="请填写你申请售后的具体原因" v-model="remark">
					</view>
					<view class="tui-box-upload">
						<tui-upload :limit="5" :dirType="0" :userType="2" :serverUrl="serverUrl" @complete="result" @remove="remove"></tui-upload>
					</view>
					
				</view>
				<view class="refund-box">
					<view class="tuikuan border-bottom" >
						<view>退款方式</view>
						<view>原支付返还 </view>
					</view>
					<view class="tuikuan">
						<view>预估退款金额</view>
						<view>￥{{list.amount}}</view>
					</view>
				</view>
				<!-- 联系方式 -->
				<view class="refund-tel">
					<view class="tuikuan border-bottom">
						<view>姓名:</view>
						<view><input type="text" v-model="userName"  placeholder="请填写联系人"> </view>
					</view>
					<view class="tuikuan">
						<view>电话:</view>
						<view><input type="text"  v-model="tel" placeholder="请填写联系电话"></view>
					</view>
				</view>
				<view style="height: 100rpx;"></view>
				<view class="btn" @tap="nextStep(1)">
					提交
				</view>
			</view>
			
			 <!-- 已申请 -->
			<view lass="step1" v-show="activeSteps == 1">
				<view class="tip">
					<view v-if="list.order_estate==4" class="refund-check"> 等待商家处理</view>
					<view  v-if="list.order_estate==8" class="refund-success">
						<text class="iconfont"   style="color:#07C160;font-size: 100rpx;">&#xe60a;</text>
					</view>
				</view>
				<view  class="order-list">
					
					
					<view class="product-box" v-for="v in list.sub">
						<view class="img">
							<image :src="v.cover_image" mode="aspectFit" style="width: 200rpx;height: 200rpx;"> </image>
						</view>
						<view class="product-temp">
							<view class="title">{{v.related_name}}</view>
							<view class="text">规格：{{v.norms_value_name}}</view>
							<view class="text">数量：{{v.related_num}}</view>
						</view>
					</view>
				</view>
				<view v-if="type==1 || type==3" class="deliver-box">
					<view class="title">
						寄回商品
					</view>
					<view class ="deliverid">
						<input type="text" v-model="refund_deliver_id" placeholder="请填写寄回的快递单号">
					</view>
					<!-- <view class="submit" @tap="nextStep(1)" >
						提交
					</view> -->
				</view>
				<!-- <view class="btn" @tap="nextStep(1)" v-if="(type==1 || type==3) && refund_deliver_id==''">
					提交
				</view> -->
				<!-- <view class="btn" @tap="nextStep(1)"  v-if="(type==1 || type==3) && refund_deliver_id">
					返回首页
				</view> -->
				<view class="btn" @tap="tohome()"  >
					返回订单列表
				</view>
			</view>
			
			
		</view>	
		<uni-popup ref="remarks" type="bottom" :custom="true" >
			<view class="remarks-box">
				<view class="title">
					选择申请原因
				</view>	
				
				<view class="closs" @tap.stop="$refs.remarks.close()">
					x
				</view>
				<view class="remarks-list">
					<view v-for="v in reasonList" @tap="check(v)" class="check-box">
						<view> {{v.name}}</view>
						<view>
							<text class="iconfont" v-if="checkindex == v.id"  style="color:#07C160">&#xe60a;</text> 
							<text class="iconfont" v-if="checkindex != v.id">&#xe638;</text>
						</view>
					</view>
				</view>
				
			</view>
			
		</uni-popup>
		<uni-popup-vlogin id="popupvLogin" ref="popupvLogin" type="bottom" />
    </view>
	

    
</template>

<script>
   
	import {oss_host} from '@/config/config.js';
	import store from '@/store/index.js';
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import tuiSteps from "@/components/tui-steps/tui-steps.vue"
	import tuiUpload from '@/components/tui-upload/tui-upload'
	
    //获取网络状态
    import {
        mapGetters
    } from 'vuex';
    export default {
        data() {
            return {
                isSelect: false,
                //网络状态
                networkStatus: true,
				OSS_HOST: oss_host,
				title:'',
				color:'#FF7A47',//背景颜色
				active:0,
				trade_no:"",
				type:"",
				activeSteps:0,
				list:[],
				serverUrl: '',
				remark:'',
				checkindex:'',
				tel:'',
				userName:'',
				
				refund_deliver_id:'',
				reasonList:[
					{
						name:'七天无理由',
						id:'1',
					},
					{
						name:'商品与页面描述不符合',
						id:'2',
					},
					{
						name:'价格变化',
						id:'3',
					},
					{
						name:'商品破损/包装问题',
						id:'4',
					},
					{
						name:'商品质量/故障',
						id:'5',
					}
				],
				items: [
					{
						title: '申请退款',
						desc: ''
					},
					{
						title: '商家处理',
						desc: ''
					},
					{
						title: '急速退款',
						desc: ''
					},
					
				],
                //接口数据
                // bargainList:[],
                data:{
                    bargainList:[
						
						
					],
					list:[],
                    page:0,
                    lastPage:0,
					userInfo:{},
                },
				imageData:'',
				activityBanner:'',
                limit:20,
                loading:false,
                loadend:false,
               
                navH:''
            };
        },
        components: {
			uniPopup,
			tuiSteps,
			tuiUpload,
        },
        computed: {
            //注册网络状态
            ...mapGetters(['netWorkType','loginStatus'])
        },
        onShow() {
            // this.getList()
        },

        onLoad(e) {
           // console.log('*****e:',e)
		  let _this =this
		   if( e.title!='undefined'){
			   this.title = e.title
			   uni.setNavigationBarTitle({
			   	title: e.title,
			   })
			   uni.setNavigationBarColor({
			   	// frontColor: '#ffffff',
			   	backgroundColor: '#ffffff',
			   })
			 
		   }
			if(typeof e.type !='undefined'){
				_this.type = e.type
			}
		    if(typeof e.trade_no !='undefined'){
				_this.trade_no = e.trade_no
		    }
			// 订单数据
			if(typeof e.list !='undefined'){
				_this.list = JSON.parse(e.list)
				if(_this.list.order_estate == 4){
					_this.activeSteps=1
				}
				if(_this.list.order_estate == 8){
					_this.activeSteps=2
				}
			}
			// if(typeof e.order_no !='undefined'){
				
			// }
			this.serverUrl = this.$service.getImgHost()
		  console.log(_this.list,'***list***')
            // this.getList();
			
            // this.userInfo=e.detail

        },
		onReachBottom(){
			 // 分页 上拉加载
			 // console.log(this.data.page,this.data.lastPage)
			if (this.data.page >= this.data.lastPage) {
				// console.log(1111111)
				uni.showToast({
					icon: 'none',
					title: '没有更多数据'
				});
				return;
			}
		  
		  // this.getList();
		  
		},
        methods: {
            // 刷新的方法
            refresh() {
                this.getList()
            },
			handleClick(e) {
				// console.log(`当前点击步骤索引：${e.index}`);
			},
			nextStep(index){
				let _this = this
				
				if(!_this.trade_no){
					uni.showToast({
						icon:'none',
						title:'订单异常'
					})
					return;
				}
				if(!_this.remark){
					uni.showToast({
						icon:'none',
						title:'请输入申请原因'
					})
					return;
				}
				if(!_this.userName){
					uni.showToast({
						icon:'none',
						title:'请输入联系人名称'
					})
					return;
				}
				if(!_this.tel){
					uni.showToast({
						icon:'none',
						title:'请输入联系电话'
					})
					return;
				}
				var opt = {
				    url: '/Order/applyRefundOrder',
				    data:{
				       trade_no:_this.trade_no,
					   remark:_this.remark,
					   userName:_this.userName,
					   tel:_this.tel,
					   refund_src:_this.imageData
				    },
				    success: function(res) {
				        //console.log(res)
				        if (res.status == 1) {
				
				          _this.activeSteps = index
							// console.log(that.activityBanner)
						} else {
				            uni.showToast({
				                icon: 'none',
				                title: res.message
				            });
				        }
				
				    }
				};
				_this.$service.GetApi(opt)
			},
			checkRemark(){
				this.$refs.remarks.open()
			},
			check(v){
				this.remark = v.name
				this.checkindex = v.id
				this.$refs.remarks.close()
			},
			result: function(e) {
				console.log(e)
				
				this.imageData = e.imgNameArr;
				this.data.list.license_image=this.imageData;
				uni.setStorageSync('Order_refunds', JSON.stringify(this.imageData));
			},
			remove: function(e) {
				//移除图片
				console.log(e)
				let index = e.index
			},
			tohome(){
				const _this = this
				
				_this.$refer.setVilit('/pages/Order/order_list_center')
				let callback = function(url) {
				    _this.$refs.popupvLogin.open()
				}
				var data = {
				    
				}
				_this.$refer.toUrl(callback, data)
			},
			
             goBack(){
                uni.navigateBack({ delta: 1 })
              },
            getList(){
                let that = this;
				let is_hot = 1
				let property = ''
				if(this.title == '每日特价'){
					is_hot = 1
				}else{
					property =87
				}
				
                 var opt = {
                    url: '/product/getActivityList',
                    data:{
                        page:++that.data.page,
						// property_id:property,
						is_hot:is_hot
                    },
                    success: function(res) {
                        //console.log(res)
                        if (res.status == 1) {

                            that.data.list=that.data.list.concat(res.data.list)
                            that.data.page=res.data.page
                            that.data.lastPage = res.data.last_page
							// that.data.userInfo = res.data.userInfo
							// that.activityBanner = res.data.banner?res.data.banner:that.OSS_HOST+'img/activity-tejia.png'
							that.color = res.data.backgroundColor?res.data.backgroundColor:'#FF7A47'
							
							// console.log(that.activityBanner)
						} else {
                            uni.showToast({
                                icon: 'none',
                                title: res.message
                            });
                        }

                    }
                };
                that.$service.GetApi(opt)




              },
           
            toDetail() {
                const _this = this

                _this.$refer.setVilit('/pages/address/add/add')
                let callback = function(url) {
                    _this.$refs.popupvLogin.open()
                }
                var data = {
                    type: 'add'
                }
                _this.$refer.toUrl(callback, data)
            },
            openSubscribe(id){
				const _this = this
				if(!_this.loginStatus){
					_this.$refs.popupvLogin.open()
					return
				}
				// console.log(23)
				_this.$refer.setVilit('/pages/GoodsDetails/GoodsDetails')
				let callback = function(url) {
				    // _this.$refs.popupvLogin.open()
				}
				var data = {
				    id: id, //
					// bargainUid:_this.data.userInfo.id,
					
				}
				_this.$refer.toUrl(callback, data)
            },
            select(row) {
                //是否需要返回地址(从订单确认页跳过来选收货地址)
                if (!this.isSelect) {
                    return;
                }
                uni.setStorage({
                    key: 'selectAddress',
                    data: row,
                    success() {
                        uni.navigateBack();
                    }
                })
            }
        }
    }
</script>

<style lang="scss">
    @import "./index.scss";
	
</style>
